<template>
    <div class="app-container">
        <!--  技能鉴定题库规则  -->
        <el-form ref="form" :model="bankRuleForm" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="项目名称" prop="projectName">
                        <el-input v-model="bankRuleForm.projectName"
                                clearable size="small" :disabled="true"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="题库名称" prop="questionBankName">
                        <el-input v-model="bankRuleForm.questionBankName"
                                placeholder="请输入题库名称" clearable
                                size="small" :disabled="true"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="专业组" prop="skillGroup">
                        <el-input v-model="bankRuleForm.skillGroup" clearable size="small" :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="等级" prop="skillGrade">
                        <el-input v-model="bankRuleForm.skillGrade" placeholder="请输入题库名称" clearable size="small" :disabled="true"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="bankRuleForm.bankRuleList" max-height="350" border :span-method="objectSpanMethod" >
                        <el-table-column label="题型" align="center" :formatter="questionTypeFormat" width="70"
                                         prop="questionType"/>
                        <el-table-column label="类别" align="center" width="90"
                                         prop="otherType"/>
                        <el-table-column label="数量" align="center" prop="quantity">
                            <template slot-scope="scope">
                                <el-input-number controls-position="right"
                                                 :min="0" :max="30" size="large"
                                                 v-model="scope.row.quantity"/>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-form>
        <div class="dialog-footer" style="float:right;margin-top: 10px;">
            <el-button :loading="buttonLoading" type="primary" @click="submitForm('submit')">保 存</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </div>
</template>

<script>
    import {addBankRule} from "@/api/question/questionBank";
    export default {
        name: "skillRuleForm",
        props: {
            // 题库规则表单信息
            bankRuleForm: Object,
        },
        data() {
            return {
                // 按钮loading
                buttonLoading: false,
                // 试题类型数据字典
                questionTypeOptions: [],
                // 合并规则对象
                mergeObj: {},
                // 合并的列
                mergeCol: ['questionType']
            }
        },
        created() {
            //查询试题类别字典状态
            this.getDicts("question_type").then(response => {
                this.questionTypeOptions = response.responseBody.result;
            });
            if (this.bankRuleForm.bankRuleList !== undefined) {
                // 初始化合并规则
                this.getSpanArr(this.bankRuleForm.bankRuleList, this.mergeObj)
            }
        },
        methods: {
            // 试题类型字典翻译
            questionTypeFormat(row, column) {
                return this.selectDictLabel(this.questionTypeOptions, row.questionType);
            },
            /** 提交按钮 */
            submitForm(flag) {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.buttonLoading = true;
                        if (this.bankRuleForm.questionBankId != null) {
                            // 校验表格
                            const temp = this.verifyTable();
                            if (temp !== '') {
                                this.buttonLoading = false;
                                return this.$message({
                                    // title: '属性列表提示',
                                    dangerouslyUseHTMLString: true,
                                    type: 'warning',
                                    duration:2000,
                                    message: `<ul>${temp}</ul>`
                                });
                            }
                            // console.log("提交的数据：" + JSON.stringify(this.bankRuleForm));
                            addBankRule(this.bankRuleForm).then(response => {
                                if (response.retCode === '200') {
                                    this.msgSuccess(response.message);
                                }
                                // this.msgSuccess("保存成功！");
                                if (flag === 'submit') {
                                    // 关闭对话框
                                    this.$emit("cancelDialog");
                                    //刷新数据
                                    this.$emit("submitForm")
                                }
                            }).finally(() => {
                                this.buttonLoading = false;
                            });
                        } else {
                            this.msgError("保存失败！");
                            // 关闭对话框
                            this.$emit("cancelDialog");
                            this.buttonLoading = false;
                        }
                    }
                });
            },
            // 验证属性列表
            verifyTable() {
                var result = true
                var message = []
                this.bankRuleForm.bankRuleList.forEach((item,index) => {
                    let no = index + 1
                    if (item.quantity === undefined || item.quantity === 0) {
                        result = result && false
                        message.push('第'+no+'行：数量不能为空或0！')
                    }
                })
                var temp = '';
                if (!result) {
                    message.forEach(v => {
                        temp += `<li>${v}</li>`;
                    })
                    return temp;
                }
                return temp;
            },
            // 初始化合并规则
            getSpanArr(list) {
                this.mergeCol.forEach((key) => {
                    let count = 0; // 用来记录需要合并行的起始位置
                    this.mergeObj[key] = []; // 记录每一列的合并信息
                    list.forEach((item, index) => {
                        // index == 0表示数据为第一行，直接 push 一个 1
                        if(index === 0) {
                            this.mergeObj[key].push(1);
                        } else {
                            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
                            if(item[key] === list[index - 1][key]) {
                                this.mergeObj[key][count] += 1;
                                this.mergeObj[key].push(0);
                            } else {
                                // 如果当前行和上一行其值不相等
                                count = index; // 记录当前位置
                                this.mergeObj[key].push(1); // 重新push 一个 1
                            }
                        }
                    })
                })
            },
            // 合并规则
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                // 判断列的属性
                if(this.mergeCol.indexOf(column.property) !== -1) {
                    // 判断其值是不是为0
                    if(this.mergeObj[column.property][rowIndex]) {
                        return [this.mergeObj[column.property][rowIndex], 1]
                    } else {
                        // 如果为0则为需要合并的行
                        return [0, 0];
                    }
                }
            },
            // 取消按钮
            cancel() {
                // 清空
                this.$emit("cancelDialog");
            },
        }
    }
</script>
